<template>
	<view class="architecture-details">
		<view class="top">
			<view class="header">
				测试
			</view>
		</view>

		<u-tabs-swiper class="tabs-swiper" ref="uTabs" bg-color="#dadada" bar-width="130" :list="list" :is-scroll="false"
		 :current="current" @change="tabsChange">
		</u-tabs-swiper>
		<swiper :style="tatalHeight" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<view class="head">
					<view class="num">总记录数:
						<view style="color: #ff0000;">14</view>
					</view>
					<view v-show="current == 0" class="select">筛选</view>
				</view>
				<view v-for="(item,index) in items" :key="index">
					<view @click="goMessage">
						<my-swiper :current="index" :flag="items.length-1" id="label"></my-swiper>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="head">
					<view class="num">总记录数:
						<view style="color: #ff0000;">14</view>
					</view>
				</view>
				<view v-for="(item,index) in isTest" :key="index">
					<view @click="goConstructorMessage" class="constructor-mesg">
						<view class="name">
							刘守世
						</view>
						<view class="enterprise">
							<view class="IDNum">
								430821123456789123123
							</view>
							<view class="">证书:
								<span>1</span>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="head">
					<view class="num">总记录数:
						<view style="color: #ff0000;">14</view>
					</view>
				</view>
				<view v-for="(item,index) in items" :key="index">
					<view class="level">
						<view class="title">
							建筑工程
						</view>
						<view class="certificate">
							<view class="num">
								证书编号:
								<span>D244038200</span>
							</view>
							<view class="time">
								有效期至:
								<span>2021-01-27</span>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view v-if="temps.length==0 && current == 1">
			<my-no-page></my-no-page>
		</view>
	</view>
</template>

<script>
	import myNoPage from '../../../components/noPage.vue'
	export default {
		data() {
			return {
				temp: [],
				items: [1, 2, 31],
				isTest: [1, 2, 31],
				tatalHeight: "",
				list: [{
					name: '中标信息'
				}, {
					name: '建造师'
				}, {
					name: '资质等级',
					count: 5
				}],
				current: 0,
				swiperCurrent: 0,
			};
		},
		components: {
			"myNoPage": myNoPage,
		},
		onLoad() {
			let self = this
			let query = uni.createSelectorQuery().in(this);
			query.select('#label').boundingClientRect(data => {
				self.tatalHeight = "height:" + (data.height * self.items.length * 2 + 296) + "rpx;"
			}).exec();
		},
		methods: {
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				let self = this
				let query = uni.createSelectorQuery().in(this);
				query.select('#label').boundingClientRect(data => {
					if (this.swiperCurrent == 0) {
						self.tatalHeight = "height:" + (data.height * self.items.length * 2 + 296) + "rpx;"
					} else if (this.swiperCurrent == 1) {
						self.tatalHeight = "height:" + (data.height * self.isTest.length * 2 + 296) + "rpx;"
					} else {
						self.tatalHeight = "height:" + (data.height * self.items.length * 2 + 296) + "rpx;"
					}
				}).exec();
			},
			goMessage() {
				uni.navigateTo({
					url: 'message'
				})
			},
			goConstructorMessage(){
				uni.navigateTo({
					url:'../constructor/message'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.architecture-details {
		background: #C8C9CC;
		height: 100vh;
		padding-top: 1rpx;

		.top {
			position: fixed;
			top: 0;
			width: 100vw;
			z-index: 10;

			.header {
				background: #FFFFFF;
				padding: 20rpx 60rpx;
				text-align: center;
				font-size: 32rpx;
			}

			.head {
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				background: #FFFFFF;

				.num {
					display: flex;
				}
			}
		}

		.tabs-swiper {
			position: fixed;
			top: 70rpx;
			width: 100vw;
			z-index: 10;
		}



		.swiper-item {
			background: #FFFFFF;
			height: 100vh;
			margin-top: 0rpx;
			padding-top: 140rpx;

			.head {
				width: 100vw;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 40rpx;
				background: #FFFFFF;

				.num {
					display: flex;
				}
			}
			.constructor-mesg{
				display: flex;
				flex-direction: column;
				border-bottom: solid 1px #C0C0C0;
				padding: 10rpx 0;
				margin: 0 40rpx;
				.name{
					margin-bottom: 10rpx;
				}
				.enterprise{
					display: flex;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #7D7E80;
					.IDNum{
						margin-right: 20rpx;
					}
				}
			}
			.level{
				padding: 10rpx 40rpx;
				border-bottom: solid 1px #C0C0C0;
				.title{
					margin-bottom: 10rpx;
				}
				.certificate{
					display: flex;
					color: #6c6c6c;
					padding: 10rpx 0;
					.num{
						margin-right: 40rpx;
					}
				}
			}
		}

		// .project {
		// 	border-bottom: solid 1px #d4d4d4;
		// 	margin: 0 20rpx;

		// 	.title {
		// 		padding: 10rpx 20rpx;
		// 	}

		// 	.content {
		// 		display: flex;
		// 		color: #999999;
		// 		padding: 20rpx;

		// 		.money {
		// 			width: 180rpx;
		// 			overflow: hidden;
		// 			text-overflow: ellipsis;
		// 			white-space: nowrap;
		// 		}
		// 	}
		.foot {
			background: #C8C9CC;
			text-align: center;
			padding: 20rpx;
		}
	}
</style>
